<template>
  <div class="wriper">
    <swiper :options="swiperOption" v-if="this.list.length" >
      <swiper-slide v-for='item of list' :key='item.id'>
        <img class='swiper-img' :src="item.imgUrl">
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
    </div>
</template>

<script>
export default {
  name: 'homeSwiper',
  props: {
    list: Array
  },
  // computed: {
  //   showSwiper () {
  //     return this.list.length
  //   }
  // },
  data: function () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true
      },
    }
  },
 
}
</script>

<style lang='stylus' scoped>
.wriper >>> .swiper-pagination-bullet-active
  background: #fff
.wriper
  width: 100%
  height: 31.25vw
  background: blue
  .swiper-img
    width: 100%
    height: 31.25vw
</style>
